<template>
  <div class="page">
    <van-search v-model="keyword" placeholder="请输入关键字"></van-search>

    <div class="section" v-if="cinema.searchList.length">
      <div class="section-title">历史记录</div>
      <div class="section-body">
        <van-space>
          <van-tag
            v-for="item in cinema.searchList"
            :key="item.id"
            closeable
            type="primary"
            @close="cinema.delSearch(item.id)"
          >
            {{ item.name }}
          </van-tag>
        </van-space>
      </div>
    </div>

    <van-list>
      <van-cell
        v-for="item in result"
        :key="item.cinemaId"
        :title="item.districtName"
        :value="item.name"
        @click="toDetail(item)"
      />
    </van-list>
  </div>
</template>

<script lang="ts" setup>
import useStore from "@/hooks/useStore";
import { ref } from "vue";
import { computed } from "vue";
import { onMounted } from "vue";

const { cinema } = useStore();

const keyword = ref("");
const result = computed(() => {
  if (!keyword.value) return [];

  return cinema.list.filter((item) => item.name.includes(keyword.value));
});

const toDetail = (data: ICinema) => {
  // 添加到历史记录中
  cinema.addSearch(data);

  // TODO 跳转操作
};

onMounted(() => {
  if (cinema.list.length) return;

  cinema.getCinemaList();
});
</script>
